<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">阀门基本信息</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                >
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >请输入所属用户</label
                        >
                        <input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="请输入所属用户"
                            pTooltip="请输入所属用户"
                            [(ngModel)]="searchApplicantName"
                        />
                    </div>
                    <div class="field">
                        <label for="searchWellCode" class="p-sr-only"
                            >请输入阀门编号</label
                        >
                        <input
                            id="searchWellCode"
                            type="text"
                            pInputText
                            placeholder="请输入阀门编号"
                            pTooltip="请输入阀门编号"
                            [(ngModel)]="searchWellCode"
                        />
                    </div>
                    <div class="field">
                        <label for="searchWellName" class="p-sr-only"
                            >请输入阀门名字</label
                        >
                        <input
                            id="searchWellName"
                            type="text"
                            pInputText
                            placeholder="请输入阀门名字"
                            pTooltip="请输入阀门名字"
                            [(ngModel)]="searchWellName"
                        />
                    </div>
                    <div class="field">
                        <label for="searchAddress" class="p-sr-only"
                            >请输入所在地址</label
                        >
                        <input
                            id="searchAddress"
                            type="text"
                            pInputText
                            placeholder="请输入所在地址"
                            pTooltip="请输入所在地址"
                            [(ngModel)]="searchAddress"
                        />
                    </div>
                </div>

                <div class="p-toolbar-group-right formgroup-inline">
                    <div class="field">
                        <p-button
                            label="查询"
                            icon="pi pi-search"
                            (click)="search()"
                        ></p-button>
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="重置"
                            class="p-button-secondary"
                            (click)="reset()"
                        ></button>
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="手动预测"
                            class="p-button-outlined p-button-secondary"
                            (click)="openPredict()"
                        ></button>
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="添加"
                            class="p-button-success"
                            (click)="showDialog()"
                        ></button>
                    </div>
                    <!--div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="导出"
                            (click)="dt1.exportCSV()"
                        ></button>
                    </div-->
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="col-12">
        <div class="card" style="min-height: 625px">
            <p-table
                #dt1
                [columns]="data"
                [value]="data"
                dataKey="wellCode"
                [rowHover]="true"
                [rows]="10"
                [paginator]="true"
                [rowsPerPageOptions]="[10, 25, 50]"
                scrollDirection="both"
                [scrollable]="true"
                styleClass="p-datatable-striped"
                responsiveLayout="scroll"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th width="120" pFrozenColumn>
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                阀门编号
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                阀门类型
                            </div>
                        </th>
                        <th width="200">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                阀门名称
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                所属用户
                            </div>
                        </th>
                        <th width="300">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                所在地址
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                取水用途
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                阀门状态
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                井内口径(m)
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                井深(m)
                            </div>
                        </th>
                        <th width="200">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                成井时间
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                通讯编号
                            </div>
                        </th>
                        <th width="350" pFrozenColumn alignFrozen="right">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                操作
                            </div>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-item>
                    <tr>
                        <td width="120" pFrozenColumn>
                            {{ item.wellCode }}
                        </td>
                        <td width="150">
                            {{ transform.transWellTypeToStr(item.wellType) }}
                        </td>
                        <td width="200">
                            {{ item.wellName }}
                        </td>
                        <td width="150">
                            {{ item.applicantName }}
                        </td>
                        <td width="300">
                            {{ item.address }}
                        </td>
                        <td width="150">
                            {{ transform.transWellUsageToStr(item.wellUsage) }}
                        </td>
                        <td width="150">
                            {{ transform.transWellStatusToStr(item.status) }}
                        </td>
                        <td width="150">
                            {{ item.wellCaliber }}
                        </td>
                        <td width="150">
                            {{ item.wellDepth }}
                        </td>
                        <td width="200">
                            {{ dateTimeTrans(item.createTime) }}
                        </td>
                        <td width="150">
                            {{ item.comNumber }}
                        </td>
                        <td
                            width="350"
                            style="text-align: center"
                            pFrozenColumn
                            alignFrozen="right"
                        >
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="启用"
                                class="p-button-success"
                                *ngIf="
                                    item.status === 1002 || item.status === 1003
                                "
                                (click)="handleStatus(item)"
                            ></button>
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="停用"
                                class="p-button-warning"
                                *ngIf="
                                    item.status === 1001 || item.status === 4444
                                "
                                (click)="handleStatus(item)"
                            ></button>
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="详情"
                                style="margin-left: 20px"
                                (click)="goToFile(item)"
                            ></button>
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="修改"
                                class="p-button-secondary"
                                style="margin-left: 20px"
                                (click)="showDialog2(item)"
                            ></button>
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="删除"
                                class="p-button-danger"
                                style="margin-left: 20px"
                                (click)="deleteWell(item)"
                            ></button>
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage">
                    <tr>
                        <td colspan="7">没有找到阀门信息</td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="loadingbody">
                    <tr>
                        <td colspan="7">正在加载阀门信息，请稍等</td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
</div>
<p-dialog
    [header]="editTag ? '修改阀门基本信息' : '新增阀门基本信息'"
    [(visible)]="display"
    [modal]="true"
    [style]="{ width: '1200px' }"
    [draggable]="false"
    [resizable]="false"
>
    <div class="field grid">
        <label for="阀门编号" class="col-fixed w-9rem"
            ><span style="color: red">*</span>阀门编号</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="wellCode"
                [(ngModel)]="well.wellCode"
                required="required"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="阀门名称" class="col-fixed w-9rem"
            ><span style="color: red">*</span>阀门名称</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="wellName"
                [(ngModel)]="well.wellName"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="createTime" class="col-fixed w-9rem"
            ><span style="color: red">*</span>成井时间</label
        >
        <div class="col">
            <p-calendar
                [(ngModel)]="well.createTime"
                [showTime]="true"
                [showSeconds]="true"
                [showIcon]="true"
                inputId="time"
                placeholder="选择时间日期"
            ></p-calendar>
            <!--input
                    type="text"
                    pInputText
                    label="createTime"
                    
                    [(ngModel)]="well.createTime"
                /-->
        </div>
    </div>
    <div class="field grid">
        <label for="所在位置" class="col-fixed w-9rem"
            ><span style="color: red">*</span>所在位置</label
        >
        <p-cascadeSelect
            [options]="address"
            optionLabel="name"
            optionGroupLabel="name"
            optionValue="id"
            [optionGroupChildren]="['children', 'children']"
            [(ngModel)]="aa"
            placeholder="选择所在位置"
            (ngModelChange)="setZone()"
        ></p-cascadeSelect>
    </div>

    <div class="field grid">
        <label for="status" class="col-fixed w-9rem"
            ><span style="color: red">*</span>阀门状态</label
        >
        <div class="col">
            <!--input
                type="text"
                
                pInputText
                placeholder="Email"
                label="email"
                
            /-->
            <p-dropdown
                [options]="status"
                [(ngModel)]="well.status"
                optionLabel="label"
                optionValue="value"
                placeholder="选择机井状态"
            ></p-dropdown>
        </div>
    </div>
    <div class="field grid">
        <label for="wellCaliber" class="col-fixed w-9rem"
            ><span style="color: red">*</span>井内口径(m)</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="wellCaliber"
                [(ngModel)]="well.wellCaliber"
                oninput="value=value.replace(/[^0-9\.]/g,'')"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="wellDepth" class="col-fixed w-9rem"
            ><span style="color: red">*</span>井深(m)</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="wellDepth"
                [(ngModel)]="well.wellDepth"
                oninput="value=value.replace(/[^0-9\.]/g,'')"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="wellType" class="col-fixed w-9rem"
            ><span style="color: red">*</span>阀门类型</label
        >
        <div class="col">
            <p-dropdown
                [options]="type"
                [(ngModel)]="well.wellType"
                optionLabel="label"
                optionValue="value"
                placeholder="选择阀门类型"
            ></p-dropdown>
        </div>
    </div>
    <div class="field grid">
        <label for="wellUsage" class="col-fixed w-9rem"
            ><span style="color: red">*</span>取水用途</label
        >
        <div class="col">
            <p-dropdown
                [options]="usage"
                [(ngModel)]="well.wellUsage"
                optionLabel="label"
                optionValue="value"
                placeholder="选择取水用途"
            ></p-dropdown>
        </div>
    </div>
    <div class="field grid">
        <label for="irrigationArea" class="col-fixed w-9rem"
            ><span style="color: red">*</span>灌溉面积</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="irrigationArea"
                [(ngModel)]="well.irrigationArea"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="comNumber" class="col-fixed w-9rem"
            ><span style="color: red">*</span>通讯编号</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="comNumber"
                [(ngModel)]="well.comNumber"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="longitude" class="col-fixed w-9rem"
            ><span style="color: red">*</span>经度
        </label>
        <div class="col">
            <input
                type="text"
                pInputText
                label="longitude"
                [(ngModel)]="well.longitude"
                oninput="value=value.replace(/[^0-9\.]/g,'')"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="latitude" class="col-fixed w-9rem"
            ><span style="color: red">*</span>纬度</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="latitude"
                [(ngModel)]="well.latitude"
                oninput="value=value.replace(/[^0-9\.]/g,'')"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="remark" class="col-fixed w-9rem"
            ><span style="color: red">*</span>备注</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="remark"
                [(ngModel)]="well.remark"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="applicantName" class="col-fixed w-9rem"
            ><span style="color: red">*</span>用水户</label
        >
        <div class="col">
            <p-dropdown
                [autoDisplayFirst]="false"
                [options]="applicant"
                [(ngModel)]="well.applicantId"
                optionLabel="applicantName"
                optionValue="applicantId"
                class="ng-invalid ng-dirty"
                placeholder="请选择用水户"
                [disabled]="editTag"
            ></p-dropdown>
        </div>
    </div>
    <ng-template pTemplate="footer">
        <p-button
            (click)="comfirmAdd()"
            label="确认"
            styleClass="p-button-text"
        ></p-button>
        <p-button
            (click)="display = false"
            label="取消"
            styleClass="p-button-text"
        ></p-button>
    </ng-template>
</p-dialog>
<p-confirmDialog [style]="{ width: '450px' }"></p-confirmDialog>
<p-toast></p-toast>

<p-dialog
    header="手动预测报警信息"
    [(visible)]="displayPredict"
    [modal]="true"
    [style]="{ width: '600px',height:'400px' }"
    [draggable]="false"
    [resizable]="false"
>
    <div class="field grid">
        <label for="applicantName" class="col-fixed w-9rem"
            ><span style="color: red">*</span>阀门编号</label
        >
        <div class="col">
            <p-dropdown
                [autoDisplayFirst]="false"
                [options]="data"
                [(ngModel)]="predictItem"
                optionLabel="wellCode"
                class="ng-invalid ng-dirty"
                placeholder="请选择阀门编号"
            ></p-dropdown>
        </div>
    </div>
    <div class="field grid">
        <label for="remark" class="col-fixed w-9rem"
            ><span style="color: red">*</span>时间</label
        >
        <div class="col">
            <p-calendar
                [(ngModel)]="predictForm.time"
                [timeOnly]="true"
                inputId="time"
                placeholder="选择时间日期"
            ></p-calendar>
        </div>
    </div>
    <div class="field grid">
        <label for="remark" class="col-fixed w-9rem"
            ><span style="color: red">*</span>温度</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="remark"
                [(ngModel)]="predictForm.temperature"
            />
        </div>
    </div>
    <div class="field grid">
        <label for="remark" class="col-fixed w-9rem"
            ><span style="color: red">*</span>压力</label
        >
        <div class="col">
            <input
                type="text"
                pInputText
                label="remark"
                [(ngModel)]="predictForm.pressure"
            />
        </div>
    </div>
    <ng-template pTemplate="footer">
        <p-button
            label="确认"
            styleClass="p-button-text"
            (click)="predict()"
        ></p-button>
        <p-button
            (click)="displayPredict = false"
            label="取消"
            styleClass="p-button-text"
        ></p-button>
    </ng-template>
</p-dialog>
